<template>
  <el-col class="childBox">
    <el-row>
      <el-alert :title="configParams['label']" type="info" :closable="false"/>
      <div class="tabBox">
        <el-form :inline="true" class="queryForm" ref="queryForm" v-show="showSearch">
          <FormItem v-for="(item,index) in fieldInfo" :itemInfo="item" :index="index" :key="index" itemType="query"
                    @ItemValChange="ItemValChange"></FormItem>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="[`${permiPrefix}:add`]"
              v-if="configParams['allowAdd']"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="[`${permiPrefix}:edit`]"
              v-if="configParams['allowUpdate']"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="[`${permiPrefix}:remove`]"
              v-if="configParams['allowDelete']"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
              v-hasPermi="[`${permiPrefix}:import`]"
              v-if="configParams['allowImport']"
            >导入
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="[`${permiPrefix}:export`]"
              v-if="configParams['allowExport']"
            >导出</el-button>
          </el-col>
          <!--右侧查询按钮-->
          <right-toolbar :showSearch.sync="showSearch"
                         stype="V1"
                         @handleQuery="handleQuery"
                         @resetQuery="resetQuery"
                         @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" ref="tables"
                  :max-height="configParams['tableHeight']" border :data="tableData"
                  @selection-change="handleSelectionChange">
          <el-table-column show-overflow-tooltip type="selection" width="55" align="center"/>
          <!--遍历需要显示的字段-->
          <el-table-column show-overflow-tooltip v-for="(item,index) in listShowColumnFilter" :key="index" :label="item.columnComment"
                           :min-width="item.columnWidth"
                           :align="item.columnAlign"
                           :prop="item.columnName">
            <template slot-scope="scope">
              <span>{{ translatorFormatter(scope.row, item) }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="160">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="text"
                         icon="el-icon-edit"
                         @click="handleUpdate(scope.row)"
                         v-hasPermi="[`${permiPrefix}:edit`]"
                         v-if="configParams['allowUpdate']"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="[`${permiPrefix}:remove`]"
                v-if="configParams['allowDelete']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="configParams['showPagination'] && table.total>0"
                    :total="table.total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>

        <!-- 添加或修改定时任务调度对话框 -->
        <el-dialog :title="title" :visible.sync="open" class="addendum-dialog" :fullscreen="true" @close="cancel" :close-on-click-modal="false" :destroy-on-close="true" append-to-body >
          <Edit v-if="open"
                :fieldInfo="fieldInfo"
                :id="updateId"
                :prefixUrl="prefixUrl"
                :formBuildKey="formBuildKey"
                :configParams="configParams"
                @cancel="cancel"></Edit>
        </el-dialog>

        <!-- Excel导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="600px" append-to-body>
          <div style="width:100%;text-align: center">
            <el-upload
              ref="upload"
              :limit="1"
              accept=".xlsx, .xls"
              :headers="upload.headers"
              :action="upload.url + '?updateSupport=' + upload.updateSupport"
              :disabled="upload.isUploading"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :auto-upload="false"
              drag
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！
                <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
              </div>
            </el-upload>
          </div>
          <div slot="footer" class="dialog-footer" style="display: flex; flex-direction: row; justify-content: center;">
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </el-row>
  </el-col>
</template>

<script>
import { TableMixins } from "@/views/youshuda/mixins/TableMixins";
import {init, list} from "@/views/youshuda/api/BaseApi";
import {strIsNotEmpty} from "@/views/youshuda/utils/youshuda";
export default {
  name: "MyTableComponent",
  mixins: [TableMixins],
  props: {
    configParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      //表格加载
      loading: false,
      //API前缀
      prefixUrl: '',
      //表单设计Key
      formBuildKey: '',
      //组件描述
      componentDesc: '',
      //权限
      permiPrefix: '',
      //数据导入配置
      upload: {
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API + this.prefixUrl + '/importData'
      }
    };
  },
  created() {
    if (this.configParams != null && this.configParams != undefined && this.configParams['loadMode'] != 'design') {
      //提交URL前缀
      this.prefixUrl = this.configParams['prefixUrl'].trim()
      this.componentDesc = this.configParams['label'].trim()
      if(!this.strIsNotEmpty(this.prefixUrl)){
        console.log("子模块请求路径为空，中止加载...");
        return;
      }
      /** 获取权限字符 **/
      let permiPrefix=this.prefixUrl;
      permiPrefix=permiPrefix.replaceAll("/",":").replaceAll("\\",":");
      if(permiPrefix.startsWith(":")){
        permiPrefix=permiPrefix.substring(1)
      }
      this.permiPrefix=permiPrefix;
      /** 模块名 **/
      this.formBuildKey = permiPrefix;
      if(permiPrefix.indexOf(":")>-1){
        this.formBuildKey = permiPrefix.substring(permiPrefix.lastIndexOf(":")+1);
      }
      /** 初始化字段信息 **/
      this.initField()
    }
  },
  methods: {
    /** 初始化字段信息 **/
    initField() {
      if(!this.strIsNotEmpty(this.prefixUrl)){
        return;
      }
      init(this.prefixUrl).then(res => {
        if (res.code == 200) {
          let fieldInfo = res.data
          this.fieldInfo = fieldInfo
          fieldInfo.forEach(item => {
            //查询参数
            this.queryParams[item.columnName] = null
          })
        } else {
          this.msgError(res.msg)
        }
      }).then(res => {
        /** 获取列表数据 **/
        if (this.configParams['loadMode'] != 'design' && this.strIsNotEmpty(this.configParams['foreignKey'])) {
          this.getList()
        }
      })
    },
    /** 查询子表数据 */
    getList() {
      if (!this.strIsNotEmpty(this.configParams['$RecodeId'])) {
        return;
      }
      this.loading = true
      //主表记录ID
      this.queryParams[this.toCamelCase(this.configParams['foreignKey'])] = this.configParams['$RecodeId'];
      //清空当前数据
      this.tableData = []
      list(this.prefixUrl, this.queryParams, this.configParams['Req-Type']).then(response => {
        this.tableData = response.rows
        this.table.total = response.total
        this.loading = false
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      /**
       * 新增数据时，如判断到主子表关联数据为空时，提示需要先录入主表数据
       */
      if(!this.strIsNotEmpty(this.configParams['$RecodeId'])){
        this.msgError("操作失败，请先录入主表关联数据")
        return;
      }
      //主表记录ID
      this.updateId = ''
      this.open = true
      this.title = '添加' + this.componentDesc
    },

  },
};
</script>
<style scoped>
  .childBox {
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 30%);
    margin-bottom: 10px;
    border-radius: 6px;
    padding: 0px !important;
    margin-top: 15px
  }

  .tabBox {
    padding: 10px 20px 20px
  }

  .el-alert {
    margin: 0 0 15px;
    background-color: #10569f !important;
    color: white !important;
  }

</style>
